<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>信息确认</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="js/lib/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/form.css">
    <style>
        
        



.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 250px;
  background-color: #f4f4f4;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
  display: none;
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}
.signature-pad-foot{
    background-color: #fff;
    padding: 15px 0px;
}
.signature-pad-foot a{
    float: left;
    width: 33.3%;
    display: block;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
}
.signature-pad-foot a{
    border-right: 1px solid #f0f0f0;
}
.signature-pad-foot a:nth-of-type(2){
    color: lightseagreen;
}

.signature-pad-foot a:last-of-type{
    border-right: none;
    color:#f08080;
}
.weui-cell img{
    width: 100px;
}

    </style>
</head>
<body onselectstart="return false">
    <div class="page_bd">
        <div class="base_info_wp">
            <div class="base_info">
                <p>姓名:张三</p>
                <p>申请时间:2018-03-05 14:00</p>
                <p>申请编号:XS2018030514002248</p>
            </div>
            
        </div>
    </div>
    <div class="page__bd">
        <form method="POST" action="test.php" id="form">
        <div class="section">
            <h4>确认信息</h4>
        </div>
        <div class="weui-cells__title">申请人帐户信息</div>
        <div class="weui-cells weui-cells_form">

            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">帐户名称</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"  placeholder="请输入申请人帐户名称">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">帐号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"  placeholder="请输入帐号">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">开户行</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"  placeholder="请输入开户行信息">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">申请人签名</label></div>
                <input type="hidden" name="signUserSignature" id="signUserSignature">
                <div class="weui-cell__bd">
                    <a href="javascript:openSignView('signUser');" >点击签名</a><img id="signUserImg" src="">
                </div>
                
            </div>
            
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">共借人签名</label></div>
                <div class="weui-cell__bd">
                    <a href="javascript:openSignView('conUser');" >点击签名</a><img src="" id="conUserImg">
                    <input type="hidden" name="conUserSignature" id="conUserSignature">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">业务员</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"  placeholder="多人请以,分隔">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">主管</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"  placeholder="多人请以,分隔">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">渠道来源</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"  placeholder="多渠道来源请以,分隔">
                </div>
            </div>
            
        </div>
       
        
        
        <div class="next_btn">
            <a href="javascript:next()">下一步</a>
        </div>
        </form>

    </div>
    
    <div id="signature-pad" class="signature-pad">

        <div class="signature-pad--body">
            <canvas></canvas>
        </div>
        <div class="signature-pad-foot">
            <a href="javascript:signClear()">清空</a>
            <a href="javascript:signConfirm()">确认</a>
            <a href="javascript:signClose()">关闭</a>
        </div>
    </div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/city-picker.min.js"></script>
<script src="js/signature_pad.umd.js"></script>
<script>
    $("#city-picker").cityPicker({
        showDistrict: false
    });
    function next(){
        var form = $('#form');
        var notEmpty = true;
        $('#form input').each(function(idx,ele){
           
            if($.trim($(ele).val()) == ''){
                alert('所有信息均为必填项');
                $(ele).focus();
                notEmpty = false;
                return false;
            }
        })
        
        if(notEmpty){
            if($.trim($('#user_tel')).length != 11){
                return alert('请正确填写手机号');
            }
            form.submit();
        }
    }
    
    

    var wrapper = document.getElementById("signature-pad");
    var canvas = wrapper.querySelector("canvas");
    var signaturePad = new SignaturePad(canvas, {
    // It's Necessary to use an opaque color when saving image as JPEG;
    // this option can be omitted if only saving as PNG or SVG
    //backgroundColor: 'rgb(255, 255, 255)'
    });
    function resizeCanvas() {
        // When zoomed out to less than 100%, for some very strange reason,
        // some browsers report devicePixelRatio as less than 1
        // and only part of the canvas is cleared then.
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);

        // This part causes the canvas to be cleared
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);

        // This library does not listen for canvas changes, so after the canvas is automatically
        // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
        // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
        // that the state of this library is consistent with visual state of the canvas, you
        // have to clear it manually.
        signaturePad.clear();
    }

    // On mobile devices it might make more sense to listen to orientation change,
    // rather than window resize events.
    window.onresize = resizeCanvas;
    resizeCanvas();

    function signClear(){
        signaturePad.clear();
    }

    function signConfirm(){
        
        if(signaturePad.isEmpty()){
            closeSignView()
            return alert('签名为空');
        }else{
            var dataURL = signaturePad.toDataURL();
            $('input#'+signaturePad.currentDes+'Signature').val(dataURL);
            $('img#'+signaturePad.currentDes+'Img').attr('src',dataURL);
            $('img#'+signaturePad.currentDes+'Img').prev('a').text('修改签名');
            closeSignView();
        }
    }
    
    function signClose(){

        if(signaturePad.isEmpty()){
            closeSignView()
        }

        if(!signaturePad.isEmpty() && confirm('检测有签名是否不保存就关闭')){
            closeSignView()
        }
    }

    function closeSignView(){
        $('#signature-pad').hide();
        signaturePad.currentDes = null;
    }

    function openSignView(des){
        $('#signature-pad').css('display',"flex");
        resizeCanvas();
        signaturePad.currentDes = des;
        
    }

</script>
</html>